<template>
  <u-form labelWidth="auto" disabled :labelStyle="labelStyle">
    <view>
			<view style="display: flex;">
				<view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料小类</view>
						<view class="rl">{{ item.provisionSmall_dictText }}</view>
					</view>
					<u-form-item label="请选择关联项目" prop="projectId" style="padding: 0;">
						<h-select-project-input-popup
							:proDisabled="true"
							ref="projectSelect"
							v-model="item.projectId"
							style="width: 100%"
							placeholder="请选择关联项目"
							border="none"
						suffixIcon="edit-pen-fill"
						></h-select-project-input-popup>
					</u-form-item>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料名称</view>
						<view class="rl">{{ item.materialName_dictText }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">物料编号</view>
						<view class="rl">{{ item.materialBillId }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">品牌</view>
						<view class="rl">{{ item.brand }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">规格型号</view>
						<view class="rl">{{ item.specification }}</view>
					</view>
					<u-form-item label="数量" prop="amount" required>
						<h-number-input
							placeholder="请输入数量"
							v-model="item.amount"
							border="none"
							:digit="0"
							:max="99999999"
							:min="1"
							suffixIcon="edit-pen-fill"
							@input="onAllAmount(item)"
						></h-number-input>
						<!-- <u--input border="none" type="number" v-number-normal placeholder="请输入数量" v-model="item.amount"></u--input> -->
					</u-form-item>
					<view class="option" style="width: 520rpx;">
						<view class="lf">单位</view>
						<view class="rl">{{ item.unit_dictText }}</view>
					</view>
					<!-- <view class="option" style="width: 520rpx;">
						<view class="lf">参考价格(元)</view>
						<view class="rl">{{ item.referencePrice }}</view>
					</view> -->
					<u-form-item label="预算单价(元)" prop="budgetAmount" required>
						<h-money-input
							placeholder="请输入预算单价"
							v-model="item.budgetAmount"
							border="none"
							suffixIcon="edit-pen-fill"
							@input="onAllAmount(item)"
						></h-money-input>
					</u-form-item>
					<view class="option" style="width: 520rpx;">
						<view class="lf">小计金额(元)</view>
						<view class="rl">{{ item.allAmount }}</view>
					</view>
				</view>
				
				<view  style="flex: 1; display: flex; align-items: center; justify-content: flex-end;">
					<u-icon name="trash-fill" color="red" size="20"  @click="handleRemoveForm(item)"></u-icon>
				</view>
			</view>
    </view>
    <!-- <view class="trip-form-action flex space-x-1">
      <view @click.stop.prevent="handleCopyForm(item)">
        <u-button size="small" type="primary">复制</u-button>
      </view>
      <view @click.stop.prevent="handleEidtForm(item)">
        <u-button size="small" type="primary">修改</u-button>
      </view>
      <view @click.stop.prevent="handleRemoveForm(item)">
        <u-button size="small" type="error">删除</u-button>
      </view>
    </view> -->
  </u-form>
</template>

<script>
import { queryByDepartment, queryProvisionBroadList, queryProvisionSmallList } from '@/api/purchase/ErpPurchaseCannibalizeForm'
import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
export default {
  name: 'ErpPurchaseApplyMaterialFormInfo',
  props: {
    index: {
      type: Number,
      default: null,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
    provisionBroad: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
			labelStyle: {
				color: '#b2b2b2'
			},
      filterMultiDictText,
      initDictOptions,
      dictOptions: {},
      smallList: [],
      api: {
        queryByDepartment,
        queryProvisionBroadList,
      },
    }
  },
  watch: {
    item: {
      handler(val) {
        if (val && val.provisionBroad) {
          this.initSmallType()
        }
      },
      immediate: true,
      deep: true,
    },
    provisionBroad: {
      handler(val) {
        if (val) {
          this.findProvisionSmallList(val)
        }
      },
      deep: true,
    }
  },
  created() {
    this.provisionBroad && this.findProvisionSmallList(this.provisionBroad)
  },
  methods: {
		onAllAmount (record) {
			this.$set(this.item, 'allAmount', (record.amount * record.budgetAmount).toFixed(2))
		},
    initSmallType() {
      this.exportWarehouseChange(this.item.provisionBroad)
    },
    exportWarehouseChange(id) {
      // this.provisionSmallChange()
      this.smallList = []
      if (id) {
        this.findProvisionSmallList(id)
      }
    },
    findProvisionSmallList(value) {
      const parentId = value
      queryProvisionSmallList({ parentId }).then((res) => {
        if (res.success) {
          const data = res.result.map((item) => {
            return { id: item.id, categoryName: item.categoryName }
          })
          this.smallList = [data]
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    handleCopyForm(item) {
      this.$emit('copy', [item, this.index])
    },
    handleEidtForm(item) {
      this.$emit('edit', [item, this.index])
    },
    handleRemoveForm(item) {
			uni.showModal({
				content: '确定删除吗？',
				success: res => {
					if (res.confirm) {
						this.$emit('remove', item)
					}
				}
			});
    },
  }
}
</script>

<style scoped lang="scss">
.inforamtion {
  margin-top: 10rpx;
  padding: 10rpx;
  border-radius: 15rpx;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}
/deep/ .u-form-item__body{
	padding: 0px !important;
}
</style>
